<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>预约设计师</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center appointment inner_page">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        <a href="index.html" class="home"></a>
        预约设计师
    </header>

    <section class="main">
       <div class="container">

           <form action="" class="appoint_form container">
               <h2><span>当前设计师：</span>唐博</h2>
               <div class="error_message"></div>
               <ul>
                   <li>

                       <input type="text" placeholder="你的名字" name="name" id="name" onblur="checkEmpty(this,'姓名不能为空')">
                   </li>
                   <li>
                       <input type="text" placeholder="联系方式" name="telephone" id="telephone" onblur="checkTel(this)">
                   </li>
                   <li>
                       <select name="province" id="s_province">
                           <option disabled value="所在省份" selected="selected">所在省份</option>
                       </select>
                   </li>

                   <div class="clear"></div>
               </ul>

               <input type="submit" value="免费预约设计师" onclick="checkInfo()">
           </form>

       </div>

    </section>


</body>
<script src="js/jquery.js"></script>
<script src="js/area.js"></script>
<script type="text/javascript">_init_area(["s_province"]);</script>
<script>
    /*校验手机号码*/
    function checkTel(obj){
        obj.errorFlag = false;
        if (checkEmpty(obj,'请您填写手机号码')) {
            obj.errorFlag = true;
            return  obj.errorFlag;
        }
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(obj.value))){
            showErrorMessage("输入手机号码不正确");
            obj.errorFlag = true;
        }else{
            clearErrorMessage();
        }
        return  obj.errorFlag;
    }
    /*检测是否为空*/
    function checkEmpty(obj,message){
        if(obj.value==''){
            showErrorMessage(message);
            return true;
        }else{
            clearErrorMessage();
            return false;
        }
    }
    /*检测计算数据*/
    function checkInfo(){
        var elTel=document.getElementById("telephone");
        var elName=document.getElementById("name");


        if(checkEmpty(elName,"姓名不能为空")){
            $(".appoint_form").submit(false);
            return;
        }

        if(checkTel(elTel)){
            $(".appoint_form").submit(false);
            return;
        }
        /*检测地区*/
        if($("#s_province option:checked").eq(0).index()==0){
            showErrorMessage("请选择所在省份");
            $(".appoint_form").submit(false);
            return;

        }

    }
    function showErrorMessage(message){
        $(".error_message").html("*"+message);
    }

    function clearErrorMessage() {
        $(".error_message").html("");
    }


</script>
</html>